<template>
    <div class=" not-found-page">
        <!-- 显示 SVG 图片 -->
        <img src="../assets/img/404.png" alt="404 Not Found" class="not-found-image">
        <h1>404 - Page Not Found</h1>
        <p>Sorry, the page you are looking for does not exist.</p>
        <router-link to="/manager/home">Go back to Home</router-link>
    </div>
</template>

<script setup>

</script>

<style scoped>
.not-found-page {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    min-height: 100%; /* 确保容器至少占满视口高度 */
    text-align: center;
    padding: 50px;
    /* 禁止该容器内文字选中 */
    user-select: none;
    -webkit-user-select: none; /* Safari 相关浏览器 */
    -moz-user-select: none; /* Firefox 浏览器 */
    -ms-user-select: none; /* IE/Edge 浏览器 */
}

.not-found-image {
    max-width: 400px;
    margin-bottom: 20px;
}

h1 {
    font-size: 36px;
    color: #333;
}

p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #000000;
}

</style>